<template>
    <div class="DetailNavbar">
        <navbar>
            <div slot="left" class="back" @click="backClick">
                <img src="~assets/img/common/back.svg" alt="返回">
            </div>
            <div slot="center" class="title">
                <div v-for="(title, index) in titles"
                     @click="titleClick(index)"
                     :class="{active: index === currentIndex}">
                    {{title}}
                </div>
            </div>
        </navbar>
    </div>
</template>

<script>
    import Navbar from 'common/navbar/Navbar';

    export default {
        name: "DetailNavbar",
        components: {
            Navbar
        },
        data() {
            return {
                titles: ['商品', '参数', '评论', '推荐'],
                currentIndex: 0
            }
        },
        methods: {
            titleClick(index) {
                this.currentIndex = index;
                this.$emit('titleClick', index);
            },
            backClick() {
                this.$router.back();
            }
        }
    }
</script>

<style scoped>
    .title {
        display: flex;
        font-size: 15px;
    }
    .title div {
        flex: 1;
    }
    .active {
        color: red;
    }
    .back img {
        margin-top: 10px;
    }
</style>